{% extends "default-layout.html" %}

{% block stylesheet %}
<link href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">{% endblock %}
{% block body %}
<article>
    <!--lbox begin-->

    <div class="lbox">
        <!--banbox begin-->
        {% if stars %}
        <div class="banbox">
            <div class="banner">
                <div id="banner" class="fader">
                    {% for post in stars|slice:":5" %}
                    <li class="slide">
                        <a href="/post/{{post.id}}" title="{{post.title}}">
                            {% if post.image_url %}<img src="{{post.image_url}}?imageView2/1/w/616/h/260/q/75|imageslim">{% endif %}
                        </a>
                    </li>
                    {% endfor %}
                    <div class="fader_controls">
                        <div class="page prev" data-target="prev"></div>
                        <div class="page next" data-target="next"></div>
                        <ul class="pager_list">
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--banbox end-->
        <!--headline begin-->
        <div class="headline">
            <ul>
                {% for post in stars|slice:"5:" %}
                <li>
                    <a href="/post/{{post.id}}" title="{{post.title}}">
                        {% if post.image_url %}<img src="{{post.image_url}}?imageView2/1/w/270/h/125/q/75|imageslim" alt="{{post.title}}">{% endif %}
                        <span>{{post.title}}</span>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        <!--headline end-->
        <div class="clearblank"></div>
        {% endif %}

        <div class="tab_box whitebg">
            <div class="tab_buttons">
                <ul>
                    {% for val in categories %}
                    <li>{{val.name}}</li>
                    {% endfor %}
                </ul>
            </div>
            <div class="newstab">
                {% for val in categories %}
                {% for k,v in categoryPosts %}
                {% if k == val.id|toString %}
                <div class="newsitem">
                    <div class="newspic">
                        <ul>
                            {% set i = 0 %}
                            {% for p in v %}
                            {% if i < 2%}
                            <li><a href="/post/{{p.id}}">
                                    {% if p.image_url %}<img
                                            src="{{p.image_url}}?imageView2/1/w/275/h/142/q/75|imageslim"><span>{{p.title}}</span></a>{% endif %}
                            </li>
                            {% endif %}
                            {% set i = i + 1 %}
                            {% endfor %}
                        </ul>
                    </div>
                    <ul class="newslist">
                        {% set n = 0 %}
                        {% for p in v %}
                        {% if n >= 2%}
                        <li>
                            <i></i><a href="/post/{{p.id}}">{{p.title}}</a>
                            <p>{{p.desc}}</p>
                        </li>
                        {% endif %}
                        {% set n = n + 1 %}
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                {% endfor %}
                {% endfor %}
            </div>
        </div>
        <!--tab_box end-->
        <!--<div class="zhuanti whitebg">
            <h2 class="htitle"><span class="hnav"><a href="/">Goalng</a><a href="/">Docker</a><a href="/">Kubernetes</a><a href="/">摄影</a></span>精彩专题</h2>
            <ul>
                <li> <i class="ztpic"><a href="/" target="_blank"><img src="image/1.jpg"></a></i> <b>个人博客模板《今夕何夕》-响应式个人...</b><span>个人博客模板《今夕何夕》，宽屏响应式个人博客模板，采用冷色系为主，固定导航栏和侧边栏，无缝滚动图片...</span><a href="" target="_blank" class="readmore">文章阅读</a> </li>
                <li> <i class="ztpic"><a href="/" target="_blank"><img src="image/2.jpg"></a></i> <b>个人博客模板《今夕何夕》-响应式个人...</b><span>个人博客模板《今夕何夕》，宽屏响应式个人博客模板，采用冷色系为主，固定导航栏和侧边栏，无缝滚动图片...</span><a href="" target="_blank" class="readmore">文章阅读</a> </li>
                <li> <i class="ztpic"><a href="/" target="_blank"><img src="image/3.jpg"></a></i> <b>个人博客模板《今夕何夕》-响应式个人...</b><span>个人博客模板《今夕何夕》，宽屏响应式个人博客模板，采用冷色系为主，固定导航栏和侧边栏，无缝滚动图片...</span><a href="" target="_blank" class="readmore">文章阅读</a> </li>
                <li> <i class="ztpic"><a href="/" target="_blank"><img src="image/4.jpg"></a></i> <b>个人博客模板《今夕何夕》-响应式个人...</b><span>个人博客模板《今夕何夕》，宽屏响应式个人博客模板，采用冷色系为主，固定导航栏和侧边栏，无缝滚动图片...</span><a href="" target="_blank" class="readmore">文章阅读</a> </li>
                <li> <i class="ztpic"><a href="/" target="_blank"><img src="image/h2.jpg"></a></i> <b>个人博客模板《今夕何夕》-响应式个人...</b><span>个人博客模板《今夕何夕》，宽屏响应式个人博客模板，采用冷色系为主，固定导航栏和侧边栏，无缝滚动图片...</span><a href="" target="_blank" class="readmore">文章阅读</a> </li>
                <li> <i class="ztpic"><a href="/" target="_blank"><img src="image/h1.jpg"></a></i> <b>个人博客模板《今夕何夕》-响应式个人...</b><span>个人博客模板《今夕何夕》，宽屏响应式个人博客模板，采用冷色系为主，固定导航栏和侧边栏，无缝滚动图片...</span><a href="" target="_blank" class="readmore">文章阅读</a> </li>
            </ul>
        </div>
        -->

        <!-- 广告 -->
        {% if site_ad_home_left %}
        <div class="ad whitebg">
            {{site_ad_home_left|safe}}
        </div>
        {% endif %}

        <div class="whitebg bloglist">
            <h2 class="htitle">最新博文</h2>
            <ul>
                <!--多图模式 置顶设计-->
                <!--
                <li>
                    <h3 class="blogtitle"><a href="/" target="_blank"><b>【顶】</b>别让这些闹心的套路，毁了你的网页设计!</a></h3>
                    <span class="bplist"><a href="/"> <img src="image/b02.jpg" alt=""></a> <a href="/"><img src="image/b03.jpg" alt=""></a> <a href="/"><img src="image/b04.jpg" alt=""> </a><a href="/"><img src="image/b05.jpg" alt=""> </a></span>
                    <p class="blogtext">如图，要实现上图效果，我采用如下方法：1、首先在数据库模型，增加字段，分别是图片2，图片3。2、增加标签模板，用if，else if 来判断，输出。思路已打开，样式调用就可以多样化啦！... </p>
                    <p class="bloginfo"><i class="avatar"><img src="image/avatar.jpg"></i><span>杨青青</span><span>2018-10-28</span><span>【<a href="/">原创模板</a>】</span></p>
                </li>
                -->
                <!--单图-->
                {% for post in list %}
                <li>
                    <h3 class="blogtitle">
                        <a href="/post/{{post.id}}">{{post.title}}</a>
                    </h3>
                    <span class="blogpic imgscale">
                        <i><a href="/post/{{post.id}}">原创</a></i>
                        <a href="/post/{{post.id}}" title="">
                            {% if post.image_url %}<img src="{{post.image_url}}?imageView2/1/w/200/h/140/q/75|imageslim" alt="">{% endif %}
                        </a>
                    </span>
                    <p class="blogtext">{{post.desc}}</p>
                    <p class="bloginfo">
                        <i class="avatar"><img src="/img/avatar.jpg?t={{service_start_time}}"></i>
                        <span>{{post.author}}</span><span>{{post.publish_at}}</span>
                        <span>
                            {% for tag in post.tags %}
                            [<a href="/search?tag={{tag.name}}">{{tag.name}}</a>]
                            {% endfor %}
                        </span>
                    </p>
                    <a href="/post/{{post.id}}" class="viewmore">阅读更多</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        <!--bloglist end-->
    </div>
    <div class="rbox">
        <div class="card">
            <h2>我的名片</h2>
            <p>网名：{{site_about_name}}</p>
            <p>职业：{{site_user_occupation}}</p>
            <p>现居：{{site_user_city}}</p>
            <p>Email：{{site_user_email}}</p>
            <ul class="linkmore">
                <li><a href="{{site_user_domain}}" class="iconfont icon-zhuye" title="网站地址"></a></li>
                <li><a href="mailto:{{site_user_email}}" target="_blank" class="iconfont icon-youxiang"
                       title="我的邮箱"></a>
                </li>
                <li><a href="http://wpa.qq.com/msgrd?v=3&uin={{site_user_qq}}&site=qq&menu=yes" target="_blank"
                       class="iconfont icon---" title="QQ联系我"></a></li>
                <li id="weixin"><a href="#" target="_blank" class="iconfont icon-weixin" title="关注我的微信"></a><i><img
                                src="{{site_user_wecaht_image}}"></i>
                </li>
            </ul>
        </div>
        <!--<div class="whitebg notice">
            <h2 class="htitle">网站公告</h2>
            <ul>
                <li><a href="#">2020-02 全新升级</a></li>
                <li><a href="#">2018-02 升级新模板</a></li>
                <li><a href="#">2017-02 使用golang重构</a></li>
                <li><a href="#">2014-02 更换模板</a></li>
            </ul>
        </div>-->
        <!--<div class="whitebg paihang">
            <h2 class="htitle">点击排行</h2>
            <section class="topnews imgscale">
                <a href="/">
                    <img src="image/h1.jpg">
                    <span>6条网页设计配色原则,让你秒变配色高手</span>
                </a>
            </section>
            <ul>
                <li><i></i><a href="/">十条设计原则教你学会如何设计网页布局!</a></li>
                <li><i></i><a href="/">用js+css3来写一个手机栏目导航</a></li>
                <li><i></i><a href="/">6条网页设计配色原则,让你秒变配色高手</a></li>
                <li><i></i><a href="/">三步实现滚动条触动css动画效果</a></li>
                <li><i></i><a href="/">个人博客，属于我的小世界！</a></li>
                <li><i></i><a href="/">安静地做一个爱设计的女子</a></li>
                <li><i></i><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></li>
                <li><i></i><a href="/">做个人博客如何用帝国cms美化留言增加头像选择</a></li>
            </ul>
        </div>
        -->
        <div class="whitebg tuijian">
            <h2 class="htitle">点击排行</h2>
            <section class="topnews imgscale">
                {% for popular in populars|slice:":1" %}
                <a href="/post/{{popular.id|toString}}">
                    {% if popular.image_url %}<img src="{{popular.image_url}}?imageView2/1/w/240/h/170/q/75|imageslim"> {% endif %}
                    <span>{{popular.title}}</span>
                </a>
                {% endfor %}
            </section>
            <ul>
                {% for popular in populars|slice:"1:" %}
                <li><a href="/post/{{popular.id|toString}}"><i>
                            {% if popular.image_url %}<img
                                    src="{{popular.image_url}}?imageView2/1/w/80/h/80/q/75|imageslim">
                            {% endif %}
                        </i>
                        <p>{{popular.title}}!</p>
                    </a></li>
                {% endfor %}
            </ul>
        </div>
        <!-- 广告位 -->
        {% if site_ad_home_right %}
        <div class="ad whitebg imgscale">
            {{site_ad_home_right|safe}}
        </div>
        {% endif %}

        <!-- 广告 -->
        <!--
        <div class="ad whitebg imgscale">
            <ul>
                <a href="/"><img src="image/ad02.jpg"></a>
            </ul>
        </div>-->
        <div class="whitebg tongji">
            <h2 class="htitle">站点信息</h2>
            <ul>
                <li><b>文章统计</b>：{{total|toString}}</li>
                <li><b>微信公众号</b>：扫描二维码，关注我</li>
                <img src="{{wechat_official_account_image}}"
                     class="tongji_gzh">
                <li>{{wechat_official_account_desc}}</li>
            </ul>
        </div>

        <div class="links whitebg">
            <h2 class="htitle">
                <!-- todo: 申请友链 -->
                <span class="sqlink">
                    <a href="javascript:;" id="apply-link">申请链接</a>
                </span>友情链接</h2>
            <ul id="index-links">
                {% for link in links %}
                <li><a href="{{link.link}}?source={{site_domain}}" target="_blank"
                       title="{{link.name}}">{{link.name}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>

        <div id="apply-link-dialog" style="display: none;" title="申请友链">
            <div id="apply-link-data" class="ui-widget">
                名称：<input name="name" class="text ui-widget-content ui-corner-all" type="text"><br/>
                链接：<input name="link" class="text ui-widget-content ui-corner-all" type="text"><br/>
                icon：<input name="icon" class="text ui-widget-content ui-corner-all" type="text"><br/>
                <!--<button id="apply-link-button" class="ui-button ui-widget ui-corner-all">提交</button>-->
            </div>
        </div>

        <div id="dialog-message" style="display: none" title="">

        </div>
    </div>
</article>
{% endblock %}

{% block script %}
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    // todo: 获取 友链
    $.get("/link/list", function (res) {
        if (res && res.success) {
            let li = "";
            for (let i in res.data) {
                let icon = "";
                if (res.data[i].icon) {
                    icon = '<i class="avatar" style="width: 24px; height: 24px;"><img src="' + decodeURIComponent(res.data[i].icon) + '"/></i>';
                }
                li += '<li>' + icon + '<a href="' + decodeURIComponent(res.data[i].link) + '?source={{site_domain}}" target="_blank"\n' +
                    '                       title="' + res.data[i].name + '">' + res.data[i].name + '</a>\n' +
                    '                </li>'
            }

            $('#index-links').html(li);
        }
    });

    $('#apply-link').click(function (e) {
        e.stopPropagation();
        $("#apply-link-dialog").dialog({
            resizable: false,
            height: "auto",
            modal: true,
            buttons: {
                "提交": function (e) {
                    e.stopPropagation();
                    let data = {};
                    $("#apply-link-data input").each(function (k, v) {
                        // data["\"" + $(v).attr("name") + "\""] = $(v).val();
                        data[$(v).attr("name")] = $(v).val();
                    });

                    $.ajax({
                        type: "POST",
                        url: "/link/apply",
                        contentType: "application/json",
                        data: JSON.stringify(data),
                        dataType: "JSON",
                        success: function (res) {
                            let title, content = "";
                            if (res && res.success) {
                                title = "申请成功！";
                                content = "管理员审核之后会显示，请您耐心等待！";
                            } else {
                                title = "提交失败！";
                                content = res.error;
                            }
                            $("#dialog-message").attr("title", title);
                            $("#dialog-message").text(content);
                            $("#dialog-message").dialog({
                                modal: true,
                                buttons: {
                                    Ok: function () {
                                        $(this).dialog("close");
                                    }
                                }
                            });
                        }
                    });

                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>
{% endblock %}